<template>
	<view>
		<!-- 家族信息 -->
		<set-info :groupData="msgObject"></set-info>

		<!-- 家族成员信息 -->
		<set-user :userList="userList" :num="num" :chatObject="msgObject"></set-user>

		<!-- 主要设置内容 -->
		<set-content @msgGoTop="msgGoTop" @disturbUser="disturbUser" :iInGroupRemarks="iInGroupRemarks" :username="username" :chatObject="msgObject"
			@changeChatObject="changeChatObject" @showChangeNickname="showChangeNickname"></set-content>

		<!-- 底部按钮 -->
		<view class="zw"></view>
		<view class="bottom-button">
			<view class="but">
				<button @click="deleteGroup">删除并退出</button>
			</view>
		</view>

		<!-- 底部弹框 -->
		<my-update-animation @submitText="changeNickname" :share="isShowBottom" :title="title" @display="display">
		</my-update-animation>

		<!-- 加载动画 -->
		<my-loading :auiLoadingShow="loadingShow"></my-loading>
	</view>
</template>

<script>
	//引入子组件
	// import setHead from './setChild/set-head.vue'
	import setUser from './set-child/set-user.vue'
	import setContent from './set-child/set-content.vue'
	import setInfo from './set-child/set-info.vue'

	import myUpdateAnimation from '@/components/common/my-update-animation/my-update-animation.vue'
	import myLoading from '@/components/common/my-loading/my-loading.vue'

	import {
		getGroupInfo,
		deleteGroup,
		queryGroupByHeadInfo,
		queryGroupUsers
	} from '@/api/http/msg/group.js'

	import {
		changeRemarksByGroup
	} from '@/api/http/msg/relation.js'

	import {
		getNowTime
	} from '@/utils/time/time.js'

	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'

	export default {
		components: {
			setUser,
			setContent,
			setInfo,
			myUpdateAnimation,
			myLoading
		},
		data() {
			return {
				userList: [],
				msgObject: {},
				num: 200,
				username: '',
				userId: uni.getStorageSync('userId'),
				nickname: uni.getStorageSync('nickname'),
				head: uni.getStorageSync('head'),
				iInGroupRemarks: '',
				isShowBottom: false,
				title: '昵称',
				loadingShow: false
			}
		},
		methods: {
			...mapActions('m_chat', ['clearMsgByList']),
			getGroupData() {
				var that = this
				this.loadingShow = true
				Promise.all([queryGroupByHeadInfo(this.msgObject.id, this.userId), getGroupInfo(this.msgObject.id),
					queryGroupUsers(this.msgObject.id, '')
				]).then((res) => {
					//1，查询头部基本信息
					var getTopList = res[0].data
					if (getTopList.pubInfo.code !== 0) {
						this.loadingShow = false
						return uni.$showMsg(getTopList.pubInfo.message);
					}
					that.msgObject.describe = getTopList.busInfo.describe
					that.msgObject.identity = getTopList.busInfo.identity
					that.iInGroupRemarks = getTopList.busInfo.iinGroupRemarks

					//2，查询家族基本信息
					var getGroupList = res[1].data
					if (getGroupList.pubInfo.code !== 0) {
						this.loadingShow = false
						return uni.$showMsg(getGroupList.pubInfo.message);
					}
					that.num = getGroupList.busInfo.num
					that.userList = getGroupList.busInfo.groupInfoList
					that.username = getGroupList.busInfo.username

					//3，查询家族成员
					var getUsersList = res[2].data
					if (getUsersList.pubInfo.code !== 0) {
						this.loadingShow = false
						return uni.$showMsg(getUsersList.pubInfo.message);
					}
					var result = getUsersList.busInfo
					that.num = result.length

					if (that.num < 5) {
						that.userList = result
					} else {
						var userListAdd = result.slice(0, 4)
						that.userList = userListAdd
					}
					this.loadingShow = false
				}).catch((err) => {
					log(err)
					this.loadingShow = false
				})
			},
			//修改参数
			changeChatObject(item) {
				this.msgObject = item
			},
			//删除家族
			deleteGroup() {
				var that = this
				deleteGroup(this.msgObject.id, this.userId).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					
					var msgJson = {
						msg: '用户：' + that.nickname + '已退出群聊',
						userId: that.userId
					}
					
					let msgData = {
						type: this.$chatType.QUIT_GROUP,
						msg: {
							groupId: that.msgObject.id,
							senderId: that.userId,
							senderHead: that.head,
							senderName: that.nickname,
							types: this.$chatType.KICK_OUT_USER, //消息类型 （0文本，1图片连接，2音频，3地图）
							message: JSON.stringify(msgJson), //消息 
							time: getNowTime(),
							groupHead: that.msgObject.head,
							groupName: that.msgObject.nickname,
							state: 0
						}
					}

					uni.myWebsocket.socketTask.send({
						data: JSON.stringify(msgData),
						async success() {
							var deleteData = {
								id: that.msgObject.id,
								type: 3,
				
							}
							//console.log(deleteData)
							//清除本地记录
							that.clearMsgByList(deleteData)
							uni.$showMsg('删除成功！');

							setTimeout(() => {
								uni.switchTab({
									url: "/pages/main/message/message"
								})
							}, 200)
						}
					})
				})
			},

			//展示弹框
			showChangeNickname() {
				this.isShowBottom = true
			},
			display() {
				this.isShowBottom = false
			},
			changeNickname(e) {
				//console.log(e)
				changeRemarksByGroup(this.userId, this.msgObject.id, e).then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					this.isShowBottom = false
					return uni.$showMsg('修改成功');
					this.iInGroupRemarks = e
				})
			},
			//聊天置顶
			msgGoTop(){
				//this.msgObject.isTop = !this.msgObject.isTop
			},
			//消息免打扰
			disturbUser(){
				//this.msgObject.isDisturb = !this.msgObject.isDisturb
			}

		},
		created() {

		},
		onLoad(e) {
			this.msgObject = JSON.parse(e.msgObject)

			//获取头部基本信息
			// this.getDataList()

			// //获取信息
			// this.getGroupInfo()
			// //获取成员信息
			// this.queryGroupUsers(this.msgObject.id)

			this.getGroupData()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: rgba(229, 229, 229, 1);
	}

	.zw {
		height: 120rpx;

	}

	.bottom-button {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		.but {
			width: 50%;
			margin-left: 25%;
			// padding: 20rpx 0;

			button {
				height: 80rpx;
				background: rgba(212, 48, 48, 1);
				border-radius: 30px;
				color: #fff;
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: 400;
			}
		}
	}
</style>